<div class="tlp-dropdown">
    <button type="button" id="dropdown-example" class="tlp-button-primary">
        <i class="fa fa-plus tlp-button-icon"></i>
        Add item
        <i class="fa fa-caret-down tlp-button-icon-right"></i>
    </button>
    <div class="tlp-dropdown-menu" role="menu">
        <span class="tlp-dropdown-menu-title" role="menuitem">Favorites</span>
        <a href="javascript:;" class="tlp-dropdown-menu-item" role="menuitem">User story</a>
        <a href="javascript:;" class="tlp-dropdown-menu-item" role="menuitem">Task</a>
        <span class="tlp-dropdown-menu-title" role="menuitem">Others</span>
        <a href="javascript:;" class="tlp-dropdown-menu-item" role="menuitem">Epic</a>
        <a href="javascript:;" class="tlp-dropdown-menu-item" role="menuitem">Test case</a>
        <span class="tlp-dropdown-menu-separator" role="separator"></span>
        <a href="javascript:;" class="tlp-dropdown-menu-item tlp-dropdown-menu-item-danger" role="menuitem">External request</a>
    </div>
</div>

<script>
    var dropdown = tlp.dropdown(document.getElementById('dropdown-example'));

    dropdown.addEventListener('tlp-dropdown-shown', callback);
    dropdown.addEventListener('tlp-dropdown-hidden', callback);

    function callback(event) {
        // Do something...
    }
</script>

<br><br>

<button type="button" id="dropdown-example-options" class="tlp-button-primary tlp-button-outline">
    Using options
    <i class="fa fa-caret-down tlp-button-icon-right"></i>
</button>
<!-- Dropdown menu, anywhere in the page -->
<div>
    <div class="tlp-dropdown-menu" id="dropdown-menu-example-options" role="menu">
        <span class="tlp-dropdown-menu-title" role="menuitem">Favorites</span>
        <a href="javascript:;" class="tlp-dropdown-menu-item" role="menuitem">User story</a>
        <a href="javascript:;" class="tlp-dropdown-menu-item" role="menuitem">Task</a>
    </div>
</div>

<script>
    tlp.dropdown(
        document.getElementById('dropdown-example-options'),
        {
            keyboard     : false,
            dropdown_menu: document.getElementById('dropdown-menu-example-options'),
        }
    );
</script>


<br>

Check out this right aligned dropdown menu <span class="tlp-text-danger">with icons</span>
<div class="tlp-dropdown">
    <button type="button" id="dropdown-right-example" class="tlp-button-primary">
        Right aligned
        <i class="fa fa-caret-down tlp-button-icon-right"></i>
    </button>
    <div class="tlp-dropdown-menu tlp-dropdown-menu-right" role="menu">
        <a href="javascript:;" class="tlp-dropdown-menu-item" role="menuitem">
            <i class="tlp-dropdown-menu-item-icon fa fa-fw fa-rebel"></i> Send a email to the Rebel Alliance
        </a>
        <a href="javascript:;" class="tlp-dropdown-menu-item" role="menuitem">
            <i class="tlp-dropdown-menu-item-icon fa fa-fw fa-empire"></i> Send a email to the Empire
        </a>
    </div>
</div>

<script>
    tlp.dropdown(document.getElementById('dropdown-right-example'));
</script>

<br>
<br>

Check out this top aligned dropdown menu <span class="tlp-text-danger">with icons</span>
<div class="tlp-dropdown">
    <button type="button" id="dropdown-top-example" class="tlp-button-primary">
        Top aligned
        <i class="fa fa-caret-down tlp-button-icon-right"></i>
    </button>
    <div class="tlp-dropdown-menu tlp-dropdown-menu-top" role="menu">
        <a href="javascript:;" class="tlp-dropdown-menu-item" role="menuitem">
            <i class="tlp-dropdown-menu-item-icon fa fa-fw fa-rebel"></i> Send a email to the Rebel Alliance
        </a>
        <a href="javascript:;" class="tlp-dropdown-menu-item" role="menuitem">
            <i class="tlp-dropdown-menu-item-icon fa fa-fw fa-empire"></i> Send a email to the Empire
        </a>
    </div>
</div>

<script>
    tlp.dropdown(document.getElementById('dropdown-top-example'));
</script>
<br>
<br>

Check out this top right aligned dropdown menu <span class="tlp-text-danger">with icons</span>
<div class="tlp-dropdown">
    <button type="button" id="dropdown-top-right-example" class="tlp-button-primary">
        Top right aligned
        <i class="fa fa-caret-down tlp-button-icon-right"></i>
    </button>
    <div class="tlp-dropdown-menu tlp-dropdown-menu-right tlp-dropdown-menu-top" role="menu">
        <a href="javascript:;" class="tlp-dropdown-menu-item" role="menuitem">
            <i class="tlp-dropdown-menu-item-icon fa fa-fw fa-rebel"></i> Send a email to the Rebel Alliance
        </a>
        <a href="javascript:;" class="tlp-dropdown-menu-item" role="menuitem">
            <i class="tlp-dropdown-menu-item-icon fa fa-fw fa-empire"></i> Send a email to the Empire
        </a>
    </div>
</div>

<script>
    tlp.dropdown(document.getElementById('dropdown-top-right-example'));
</script>

<br>
<br>

Use <code>fa-fw</code> on the icon and <code>tlp-dropdown-menu-on-icon</code> on the menue if
the trigger of the dropdown is a unique icon like this: <div class="tlp-dropdown">
    <i class="fa fa-cog fa-fw" id="dropdown-icon-right-example"></i>
    <div class="tlp-dropdown-menu tlp-dropdown-menu-right tlp-dropdown-menu-on-icon" role="menu">
        <a href="javascript:;" class="tlp-dropdown-menu-item" role="menuitem">
            <i class="tlp-dropdown-menu-item-icon fa fa-fw fa-rebel"></i> Send a email to the Rebel Alliance
        </a>
        <a href="javascript:;" class="tlp-dropdown-menu-item" role="menuitem">
            <i class="tlp-dropdown-menu-item-icon fa fa-fw fa-empire"></i> Send a email to the Empire
        </a>
    </div>
</div>

<script>
    tlp.dropdown(document.getElementById('dropdown-icon-right-example'));
</script>

<br>
<br>

Checkout this dropdown
<div class="tlp-dropdown">
    <button type="button" id="dropdown-with-tabs-example" class="tlp-button-primary">
        with tabs
        <i class="fa fa-caret-down tlp-button-icon-right"></i>
    </button>
    <div class="tlp-dropdown-menu tlp-dropdown-menu-right tlp-dropdown-with-tabs-on-top" role="menu">
        <nav class="tlp-tabs">
            <a href="javascript:;" class="tlp-tab tlp-tab-active">Branches</a>
            <a href="javascript:;" class="tlp-tab">Tags</a>
        </nav>
        <a href="javascript:;" class="tlp-dropdown-menu-item" role="menuitem">
            <i class="tlp-dropdown-menu-item-icon fa fa-fw fa-rebel"></i> Send a email to the Rebel Alliance
        </a>
        <a href="javascript:;" class="tlp-dropdown-menu-item" role="menuitem">
            <i class="tlp-dropdown-menu-item-icon fa fa-fw fa-empire"></i> Send a email to the Empire
        </a>
    </div>
</div>

<script>
    tlp.dropdown(document.getElementById('dropdown-with-tabs-example'));
</script>
